import React, {Component} from 'react';
import {Breadcrumb, message, Form, Input, Button, Select, Popover, Table, Space} from "antd";
import {NavLink} from "react-router-dom";
import {connect} from "react-redux";

const {Option} = Select;

@connect(state => ({userInfo: state.userInfo}))
class Comment extends Component {
    state = {
        pagelistquery: {
            admin: "",
            state: "",
            total: 0,
            page: 1,
            pagesize: 10
        },
        loading:false,
        tableData: []
    }
    getReply = async () => {
        for (let index = 0; index < this.state.tableData.length; index++) {
            let result = await this.$axios.post("/admin/getreply",
                {comment_id: this.state.tableData[index].comment_id}
            );
            if (result.data.state.type === "SUCCESS") {
                let tableData = this.state.tableData
                tableData[index].child = result.data.data;
                tableData[index].child.map((item, index) => {
                    return item.key = index;
                })
                this.setState({tableData: tableData})
            }
        }
    }
    getCommentList = async (values) => {
        this.setState({loading:true});
        values = {...this.state.pagelistquery, ...values};
        this.setState({pagelistquery: values});
        let result = await this.$axios.post("/admin/getcomment", values);
        if (result.data.state.type === "SUCCESS") {
            let pagelistquery = this.state.pagelistquery;
            pagelistquery.total = result.data.count;
            this.setState({tableData: result.data.data, pagelistquery: pagelistquery});
            this.setState({loading:false});
            this.getReply();
        }
    }
    del = async (id, type) => {
        let data = {
            id: id,
            type: type
        };
        let result = await this.$axios.post("/admin/admindelete", data);
        if (result.data.state.type === "SUCCESS") {
            message.success("删除成功");
            this.getCommentList();
        }
    }
    changeState = async (type, state, id) => {
        let data = {
            id: id,
            type: type,
            state: state
        };
        let result = await this.$axios.post("/admin/changecontentstate", data);
        if (result.data.state.type === "SUCCESS") {
            message.success("操作成功");
            this.getCommentList();
        }
    }
    handleSizeChange = (current, size) => {
        let pagelistquery = this.state.pagelistquery
        pagelistquery.pagesize = size;
        this.setState({pagelistquery: pagelistquery});
        this.getCommentList();
    }
    handleCurrentChange = (page, pagesize) => {
        let pagelistquery = this.state.pagelistquery;
        pagelistquery.page = page;
        pagelistquery.pagesize = pagesize;
        this.setState({pagelistquery: pagelistquery});
        this.getCommentList();
    }

    componentDidMount() {
        this.getCommentList()
    }

    render() {
        let {tableData, pagelistquery, loading} = this.state;
        tableData.map((item, index) => {
            return item.key = index;
        })
        const commentColumns = [
            {
                title: "创建日期",
                dataIndex: "comment_createtime",
                render: text => <span>{this.dateFormat(text)}</span>
            },
            {
                title: "评论者",
                dataIndex: "nickname",
            },
            {
                title: "状态",
                dataIndex: "ispublic",
                render: text => {
                    if (text === 1) return <span style={{color: "rgb(108, 187, 122)"}}>审核通过</span>
                    else if (text === 0) return <span style={{color: "#409EFF"}}>未审核</span>
                    else return <span style={{color: "rgb(246, 12, 108)"}}>审核未通过</span>
                }
            },
            {
                title: "评论内容",
                dataIndex: "comment_content",
                render: text => (
                    <Popover content={(<span dangerouslySetInnerHTML={{__html: text}}></span>)}>
                        <Button type="text" style={{color: "#409EFF"}}>回复内容</Button>
                    </Popover>
                )

            },
            {
                title: "审核人",
                dataIndex: "admin",
            },
            {
                title: "操作",
                dataIndex: "comment_id",
                render: (text, record) => (
                    <Space size="small">
                        {
                            (record.ispublic === -1 || record.ispublic === 0) ?
                                <Button type="text" style={{color: "#409EFF"}} size={"small"}
                                        onClick={() => {
                                            this.changeState('comment', 1, text)
                                        }}>通过审核</Button> : null
                        }
                        {
                            (record.ispublic === 1 || record.ispublic === 0) ?
                                <Button type="text" style={{color: "#409EFF"}} size={"small"}
                                        onClick={() => {
                                            this.changeState('comment', -1, text)
                                        }}>不通过审核</Button> : null
                        }
                        <Button type="text" style={{color: "#409EFF"}} size={"small"} onClick={() => {
                            this.del(text, 'comment')
                        }}
                                disabled={this.props.userInfo.uinfo.jurisdiction.issh !== '1' && this.props.userInfo.uinfo.username !== 'admin'}
                        >删除</Button>
                    </Space>
                )
            }
        ]
        const replyColumns = [
            {
                title: "创建日期",
                dataIndex: "createtime",
                render: text => <span>{this.dateFormat(text)}</span>
            },
            {
                title: "回复者",
                dataIndex: "nickname",
            },
            {
                title: "被回复者",
                dataIndex: "tousernickname",
            },
            {
                title: "状态",
                dataIndex: "ispublic",
                render: text => {
                    if (text === 1) return <span style={{color: "rgb(108, 187, 122)"}}>审核通过</span>
                    else if (text === 0) return <span style={{color: "#409EFF"}}>未审核</span>
                    else return <span style={{color: "rgb(246, 12, 108)"}}>审核未通过</span>
                }
            },
            {
                title: "回复内容",
                dataIndex: "reply_content",
                render: text => (
                    <Popover content={(<span dangerouslySetInnerHTML={{__html: text}}></span>)}>
                        <Button type="text" style={{color: "#409EFF"}}>回复内容</Button>
                    </Popover>
                )

            },
            {
                title: "审核人",
                dataIndex: "admin",
            },
            {
                title: "操作",
                dataIndex: "reply_id",
                render: (text, record, index) => (
                    <Space size="small">
                        {
                            (record.ispublic === -1 || record.ispublic === 0) ?
                                <Button type="text" style={{color: "#409EFF"}} size={"small"}
                                        onClick={() => {
                                            this.changeState('reply', 1, text)
                                        }}>通过审核</Button> : null
                        }
                        {
                            (record.ispublic === 1 || record.ispublic === 0) ?
                                <Button type="text" style={{color: "#409EFF"}} size={"small"}
                                        onClick={() => {
                                            this.changeState('reply', -1, text)
                                        }}>不通过审核</Button> : null
                        }
                        <Button type="text" style={{color: "#409EFF"}} size={"small"} onClick={() => {
                            this.del(text, 'reply')
                        }}
                                disabled={this.props.userInfo.uinfo.jurisdiction.issh !== '1' && this.props.userInfo.uinfo.username !== 'admin'}
                        >删除</Button>
                    </Space>
                )
            }
        ]
        return (
            <div>
                <div className="top">
                    <Breadcrumb>
                        <Breadcrumb.Item>
                            <NavLink to='/'>首页</NavLink>
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>
                            审核中心
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>
                            评论审核
                        </Breadcrumb.Item>
                    </Breadcrumb>
                </div>
                <div className="main">
                    <div>
                        <Form onFinish={this.getCommentList} layout={"inline"}>
                            <Form.Item name="admin" initialValue=""
                                       style={{width: '15%',margin: "15px 10px 22px 0"}}
                            >
                                <Input placeholder="审批人"></Input>
                            </Form.Item>
                            <Form.Item name="state" initialValue=""
                                       style={{width: '15%', margin: "15px 10px 22px 0"}}
                            >
                                <Select placeholder="状态">
                                    <Option value="">全部</Option>
                                    <Option value="0">待审核</Option>
                                    <Option value="1">审核通过</Option>
                                    <Option value="-1">审核未通过</Option>
                                </Select>
                            </Form.Item>
                            <Form.Item style={{margin: "15px 10px 22px 0"}}>
                                <Button type="primary" htmlType="submit">查询</Button>
                            </Form.Item>
                        </Form>
                    </div>
                    <Table dataSource={tableData}
                           columns={commentColumns} bordered
                           loading={loading}
                           pagination={{
                               total: pagelistquery.total,
                               showSizeChanger: true,
                               showQuickJumper: true,
                               onChange: this.handleCurrentChange,
                               onShowSizeChange: this.handleSizeChange,
                               showTotal: total => `共 ${total} 条`,
                               position: ["bottomLeft"]
                           }}
                           expandable={{
                               expandedRowRender: record => <Table dataSource={record.child} columns={replyColumns}
                                                                   pagination={false} bordered></Table>
                           }}
                    ></Table>
                </div>
            </div>
        );
    }
}

export default Comment;